/**
 * @desc 手机号
 */
<template>
    <view class="phone">
        <nut-noticebar v-if="!phone" text="完善手机号，方便教练及时联系！" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">
        </nut-noticebar>
        <nut-input v-if="isOpen" label="手机号" placeholder="手机号" v-model="phone" type="tel"
            :error-message="errorMessage" />
        <nut-input label="姓名" placeholder="姓名" v-model="name" />
        <nut-cell v-if="isOpen" title="驾证类型:">
            <template v-slot:link>
                <nut-radiogroup direction="horizontal" v-model="type">
                    <nut-radio label="1">C1</nut-radio>
                    <nut-radio label="2">C2</nut-radio>
                </nut-radiogroup>
            </template>
        </nut-cell>
        <nut-cell title="请选择教练" :desc="coach" @click="() => { show = true }"></nut-cell>
        <nut-picker v-model:visible="show" :columns="columns" title="教练选择" @confirm="confirmCoach">
        </nut-picker>
        <view class="phone-btn">
            <nut-button type="primary" @click="onGetPhoneNumber">确认提交</nut-button>
        </view>
        <nut-dialog title="提示" content="是否确认提交修改!" v-model:visible="visible" @cancel="onCancel" @ok="onOk" />
    </view>
</template>

<script>
import db from '../../server/index';
import Taro from '@tarojs/taro';
const _openid = Taro.getStorageSync('openid');
const reg = /^[1][3,4,5,7,8][0-9]{9}$/;
export default {
    name: 'Logs',
    data() {
        return {
            type: '1',
            phone: '',
            errorMessage: '',
            columns: [],
            visible: false,
            isOpen: false,
            show: false,
            name: '',
            coach: '',
            coachId: ''
        }
    },
    created() {
        this.init()
    },
    onPullDownRefresh() {
        Taro.showLoading({
            title: '加载中',
        })
        this.init()
    },
    methods: {
        onCancel() {
            this.visible = false
        },
        confirmCoach({ selectedValue, selectedOptions }) {
            const { value, text } = selectedOptions[0]
            this.coach = text;
            this.coachId = value;
        },
        onOk() {
            db.collection('phone').where({
                _openid
            }).get().then(({ data = [] }) => {
                const { avatarUrl, nickName } = Taro.getStorageSync('userInfo')
                if (data.length) {
                    db.collection('phone').where({
                        _openid
                    }).update({
                        data: {
                            phone: this.phone,
                            name: this.name,
                            coachId: this.coachId,
                            avatarUrl,
                            nickName,
                            type: this.type
                        }
                    }).then(() => {
                        this.visible = false
                        Taro.showToast({
                            title: '修改成功！',
                            icon: 'success',
                            duration: 2000,
                            mask: true
                        })
                        this.init();
                    })
                } else {
                    db.collection('phone').add({
                        data: {
                            phone: this.phone,
                            name: this.name,
                            coachId: this.coachId,
                            avatarUrl,
                            nickName,
                            type: this.type
                        }
                    }).then(() => {
                        this.visible = false
                        Taro.showToast({
                            title: '提交成功！',
                            icon: 'success',
                            duration: 2000,
                            mask: true
                        });
                        this.init();
                    })
                }
            }).catch(() => {
                this.visible = false
                Taro.showToast({
                    title: '提交失败！',
                    icon: 'success',
                    duration: 2000,
                    mask: true
                })
                this.init();
            })
        },
        onGetPhoneNumber() {
            if (!reg.test(this.phone)) {
                this.errorMessage = '手机号格式错误'
                return
            }
            this.errorMessage = ''
            this.visible = true
        },
        async init() {
            await db.collection('phone').where({
                _openid
            }).get().then(({ data = [] }) => {
                if (data.length) {
                    this.phone = data[0].phone
                    this.name = data[0].name
                    this.type = data[0].type
                    db.collection('coach').where({
                        _id: data[0].coachId,
                        stop: false
                    }).get().then(({ data = [] }) => {
                        if (data.length) {
                            this.coach = data[0].coach
                            this.coachId = data[0]._id
                        }
                    })
                }
            })
            await db.collection('setting').get().then(({ data = [] }) => {
                this.isOpen = data[0].open
            })
            //  审核通过的教练
            await db.collection('coach').where({
                stop: false
            }).get().then(({ data = [] }) => {
                this.columns = data.map(item => {
                    return {
                        text: item.coach,
                        value: item._id
                    }
                })
            })
            Taro.stopPullDownRefresh();
            Taro.hideLoading();
        }
    }
}
</script>

<style lang="less">
.phone {
    &-btn {
        text-align: center;
        margin-top: 10px;
    }
}
</style>
